<template lang="html">
  <div class="app pb" :class='{pbReduce:isPb}'>
    <lawyer-bar />
    <lawyer-head />
    <div class="lawyer-grayBg">
      <div class="lawyerHome w1200">
        <city-bar :city='city' @emitEvent='loadLawyerList' />
        <ul class="lawyers">
          <li v-for='(item,index) in lawyer' :class='{active:index%3==0}' v-if='index<limit[city_num]'>
            <router-link :to='{name:"lawyerDetail",params: { id: item.json_data.article_id }}'>
              <div class="img">
                <img v-lazy=item.json_data.img>
              </div>
              <div class="info">
                <div class="name">{{item.json_data.name}}</div>
                <div class="pos">{{item.json_data.company}}</div>
                擅长领域
                <div class="intro">{{item.json_data.good_area}}</div>
              </div>
            </router-link>
          </li>
          <li class="init" v-if='init_show'>
            <div class="img">
              <img src="../../assets/images/init_man.jpg">
            </div>
            <div class="info">
              <img src="../../assets/images/init_font.jpg">
            </div>
          </li>
        </ul>
        <div class="loadMore no-double" @click='loadMore()' v-if='arr[1]'>查看更多</div>
      </div>
    </div>
    <lawyer-footer />
  </div>
</template>

<script>
import axios from 'axios'
import lawyerheader from '../header/lawyer-header.vue'
import lawyerfooter from '../footer/footer.vue'
import cityBar from '../cityBar/cityBar.vue'
import lawyerBar from '../header/topbar.vue'
export default {
  data(){
    return{
      city:[],num:0,isPb:false,
      lawyer:[],limit:[],arr:[274,1],//初始化数组，当列表页首次进入时加载274全部数据
      city_num:0,//每个城市的索引
      init_show:false//当该城市下没有数据时显示默认
    }
  },
  methods:{
    loadCity:function() {
      axios.get('http://cms.xinggeweb.com/api/action/foldersByParentId?version=1.0.1&apiNo=1000000&time=20170314160401&apiUser=lawyer_api&checkSum=YBrs&p={parentId:268}')
      .then((response) => {
        this.city=response.data.data.list;
        // limit的初始值[12,12,...]
        let arr_n=[];
        for(let i=0;i<this.city.length;i++){
          arr_n.push(12);
        }
        this.limit=arr_n;
        // 继续初始化数组
        this.arr.push(this.limit);
        this.arr.push(0);
      })
      .catch((error) => {
        console.log(error);
      })
    },
    // 默认全部列表页
    loadLawyer:function(){
      axios.get('http://cms.xinggeweb.com/api/action/pageArticle?version=1.0.1&apiNo=1000000&time=20170314160401&apiUser=admin&checkSum=YBrs&pageNo=1&pageSize=100&p={folderId:274}')
      .then((response) => {
        let lawyerStr = response.data.data.list;
        this.lawyer = lawyerStr;
        for(let a of this.lawyer){
          if(a.json_data==null){
            // console.log(this);
          }
          let substr = a.json_data.good_area.substr(0,80);
          a.json_data.good_area = substr;
          if(substr.length==80){
            a.json_data.good_area = substr+'...';
          }
        }
      })
      .catch((error) => {
        console.log(error);
      })
    },
    loadLawyerList:function(id) {
      this.arr=id;
      // 控制每个城市的索引
      this.city_num=this.arr[3];
      axios.get('http://cms.xinggeweb.com/api/action/pageArticle?version=1.0.1&apiNo=1000000&time=20170314160401&apiUser=admin&checkSum=YBrs&pageNo=1&pageSize=100000000&p={folderId:'+id[0]+'}')
      .then((response) => {
        // console.log(response);
        let lawyerStr = response.data.data.list;
        this.lawyer = lawyerStr;
        if(this.lawyer.length==0){
          this.init_show=true
        }else{
          this.init_show=false
        }
        // 进入各个城市时，当律师数小于一屏律师数，查看更多按钮不显示
        if(this.lawyer.length<=this.limit[this.city_num]){
          this.arr[1]=0;
        }
        // 律师的介绍文字过多时
        for(let a of this.lawyer){
          let substr = a.json_data.good_area.substr(0,80);
          a.json_data.good_area = substr;
          if(substr.length==80){
            a.json_data.good_area = substr+'...';
          }
        }
      })
      .catch((error) => {
        console.log(error);
      })
    },
    // 顶部变化
    headerReduce:function(){
      var top=document.body.scrollTop;
      if(top>0){
        this.isPb=true;
      }else{
        this.isPb=false
      }
    },
    loadMore:function(){
      // console.log(this.arr);
      let arr_l=[];
      this.arr[2][this.arr[3]]+=12;
      for(let a of this.arr[2]){
        arr_l.push(a);
      }
      this.limit=arr_l;
      // 全部加载完后按钮消失
      if(this.lawyer.length<=this.limit[this.city_num]){
        this.arr[1]=0;
      }
    }
  },
  created(){
    this.loadCity(),
    this.loadLawyer();
    this.arr[1]=1;//页面进入时查看更多就显示
  },
  activated(){
    document.title='名人堂-名家律师'
  },
  mounted(){
    window.addEventListener('scroll',this.headerReduce);
  },
  components:{
    'lawyer-head':lawyerheader,
    'lawyer-footer':lawyerfooter,
    cityBar,lawyerBar
  }
}
</script>

<style lang="less">
@import 'lawyer.less';
</style>
